@use '../colors.scss' as colors;
@use './light-base.scss' as light-base;

$base-hue: light-base.$base-hue;
$base-saturation: light-base.$base-saturation;

$elevations: (
  'sunken-1': hsl($base-hue, $base-saturation, 90%),
  'base': hsl($base-hue, $base-saturation, 85%),
  'raised-1': hsl($base-hue, $base-saturation, 80%),
  'raised-2': hsl($base-hue, $base-saturation, 75%),
  'raised-3': hsl($base-hue, $base-saturation, 72%),
);

$interactive-components: (
  'control': hsl($base-hue, $base-saturation, 80%),
  'input': hsl($base-hue, $base-saturation, 60%),
);

$common-state-deltas: (
  'hover': 0 0 -3,
  'focused': 0 0 -5,
  'active': 0 0 -7,
  'disabled': 0 0 6,
  'muted': 0 0 6,
);

$components: (
  'row': hsl($base-hue, $base-saturation, 88%),
  'grid': hsl($base-hue, $base-saturation, 80%),
  'divider': hsl($base-hue, $base-saturation, 80%),
  'header': hsl($base-hue, $base-saturation, 80%),
  'token': hsl($base-hue, $base-saturation, 80%),
  'supporting': hsl($base-hue, $base-saturation, 80%),
  'group': hsl($base-hue, $base-saturation, 75%),
  'section': hsl($base-hue, $base-saturation, 70%),
);

$contextual: (
  'success': hsl(hue(colors.$success), 40%, 70%),
  'warning': hsl(hue(colors.$warning), 70%, 60%),
  'danger': hsl(hue(colors.$danger), 100%, 80%),
  'info': hsl(hue(colors.$info), 55%, 65%),
  'help': hsl(hue(colors.$help), 40%, 70%),
  'tip': hsl(hue(colors.$tip), 40%, 60%),
  'outcome': hsl(hue(colors.$outcome), 25%, 60%),
);

$contextual-state-deltas: (
  'hover': 0 6 6,
  'active': 0 2 10,
  'focused': 5 5 3,
  'disabled': 0 0 -20,
  'muted': 0 0 -10,
);

$exports: (
  'stateless': (
    $components,
  ),
  'stateful': (
    ($elevations, $common-state-deltas),
    ($interactive-components, $common-state-deltas),
    ($contextual, $contextual-state-deltas),
  ),
);
